<template>
    <div class="monitoring">
        <div class="item" v-for="(item, index) in showData" :key="index">
            <img class="back" :src="item.img" alt="" />
            <div class="info">
                <img src="@/assets/images/基础/monitor/point_pic.png" alt="" />
                <div class="name">{{ item.name }}</div>
            </div>
        </div>
        <div :class="['arrow', 'prev', pageConfig.page == 1 ? 'disable' : '']" @click="handlerPageChange(0)"></div>
        <div :class="['arrow', 'next', pageConfig.page * pageConfig.pageSize >= pageConfig.total ? 'disable' : '']" @click="handlerPageChange(1)"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, Ref, ref } from 'vue'
import { getAssetsFile } from '@/utils'

interface listType {
    img: string
    name: string
}

const props = defineProps({
    list: {
        type: Array<listType>,
        default: () => [
            {
                img: getAssetsFile('基础/monitor/监控.png'),
                name: '监控1'
            },
            {
                img: getAssetsFile('基础/monitor/监控.png'),
                name: '监控2'
            },
            {
                img: getAssetsFile('基础/monitor/监控.png'),
                name: '监控3'
            },
            {
                img: getAssetsFile('基础/monitor/监控.png'),
                name: '监控4'
            }
        ]
    },
    pageSize: {
        type: Number,
        default: 3
    }
})

const pageConfig = ref({
    total: 3,
    page: 1,
    pageSize: props.pageSize
})

const showData: Ref<listType[]> = ref([])

/**
 * 换页
 * @param type 0前一页 1后一页
 */
const handlerPageChange = (type: number) => {
    let { total, page, pageSize } = pageConfig.value
    const copyList = JSON.parse(JSON.stringify(props.list))
    if (type == 0) {
        if (page <= 1) return
        page--
        showData.value = copyList.splice((page - 1) * pageSize, pageSize)
    } else {
        if (page * pageSize >= total) return
        page++
        showData.value = copyList.splice((page - 1) * pageSize, pageSize)
    }

    pageConfig.value = {
        total: total,
        page,
        pageSize: props.pageSize
    }
}

onMounted(() => {
    const copyList = JSON.parse(JSON.stringify(props.list))
    pageConfig.value.total = copyList.length
    showData.value = copyList.splice(0, pageConfig.value.pageSize)
})
</script>

<style scoped lang="scss">
.monitoring {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: relative;
    .item {
        position: relative;
        .back {
            width: 250px;
            height: 159px;
            border-radius: 10px;
            cursor: pointer;
        }
        .info {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            padding: 5px 5px 5px 10px;
            width: 100%;
            background-image: linear-gradient(180deg, #05080900 0%, #0d1e39 100%);
            img {
                width: 20px;
                height: 20px;
            }
            .name {
                letter-spacing: 2px;
                color: #fff;
                font-size: 16px;
            }
        }
    }

    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 41px;
        cursor: pointer;
    }

    .prev {
        left: 0;
        background: url('@/assets/images/基础/page_left.png') no-repeat;
        background-size: contain;
    }

    .next {
        right: 0;
        background: url('@/assets/images/基础/page_right.png') no-repeat;
        background-size: contain;
    }

    .disable {
        opacity: 0.4;
    }
}
</style>
